<!-- 
  @name: 交易流水
  @date: 2020.3.13
 -->
<template>
	<view class="content">
		<view class="fixed_top">
			<!-- 顶部区域 -->
			<view class="topview">
				<view class="total" :class="earnRadio > 0 ? '' : 't1'">
					<view class="item">
						<view class="num1">{{totalNum}}</view>
						<view class="note1">加注总量(kg)</view>
					</view>
					<!-- <view class="item" v-if="earnRadio > 0">
						<view class="num2">{{expectMoney}}</view>
						<view class="note21">预计收益(元)</view>
						<view class="note22">(收益比例:加注总额{{earnRadio2}})</view>
					</view> -->
					<view class="item">
						<view class="num1">{{totalMoney}}</view>
						<view class="note1">加注总额(元)</view>
					</view>
				</view>
				<view class="date-select" @tap="openCloseDate">
					<view>日期筛选</view>
					<image class="triangle" :class="[showPopup?'down':'']" src="/static/images/trigger.png" mode="aspectFill"></image> 
					<view class="date-content">
						<view>{{startTime}}</view>
						<view>{{endTime}}</view>
					</view>
					<!-- <view class="_triangle" :class="showPopup ? 'atop' : 'abtm'"></view> -->
				</view>
			</view>
			
			<!-- 筛选 -->
			<view class="typeview">
				<view @tap="openCloseSite" class="u-f-ac">
					<text  :class="!siteId ? '' : 'sl'">{{siteName||'加注站'}}</text>
					<view class="_triangle" :class="showSite ? 'atop' : 'abtm'"></view>
				</view>
				<view @tap="openClosePay" class="u-f-ac">
					<text class="l2"  :class="!payType ? '' : 'sl'">{{payName||'支付方式'}}</text>
					<view class="_triangle" :class="showPay ? 'atop' : 'abtm'"></view>
				</view>
				<text style="flex: 1;"></text>
				<view class="down" @tap="closePopup(); showSE = true">
					<view class="icon"></view>
					<view class="text">报表下载</view>
				</view>
			</view>
		</view>
		
		<!-- 日期筛选弹窗 -->
		<date-select
			top="160"
			:show="showPopup"
			:start="startTime"
			:end="endTime"
			@submit="onSubmit"
			@cancle="onCancle">
		</date-select>
		
		<view class="_popup ts" v-show="showSite || showPay" @tap="closePopup"></view>
		<!-- 加注站 -->
		<scroll-view
			class="select"
			scroll-y
			scroll-top="0"
			v-show="showSite"
			@scrolltolower="getSiteList">
			<view class="scroll_blank"></view>
			<view
				class="btn"
				v-for="(item, index) in siteList"
				:key="item.siteId"
				:class="item.siteId === siteId ? 'sl' : ''"
				@tap="changeStie(item, index)">
				{{item.siteName}}
			</view>
		</scroll-view>
		<!-- 支付方式 -->
		<view class="select" v-show="showPay">
			<view
				class="btn btn2"
				v-for="(item, index) in payList"
				:key="index"
				:class="payType === item.code ? 'sl' : ''"
				@tap="changePay(item, index)">
				{{item.text}}
			</view>
		</view>
		
		<!-- 发送报表 -->
		<view class="_popup" v-show="showSE" @tap="showSE = false"></view>
		<view class="popup_center" v-show="showSE">
			<view class="_close" @tap="showSE = false"></view>
			<view class="_title">报表下载</view>
			<view class="_note">统计报表会以邮件形式发送邮箱</view>
			<view class="_input">
				<input class="_int" placeholder="请输入邮箱地址" placeholder-class="phcolor" v-model.trim="emailAddress" />
			</view>
			<button class="_btn" @tap="sendEmail">提交</button>
		</view>
		
		<!-- 列表 -->
		<view class="listview">
			<view
				class="card"
				v-for="(item, index) in lists"
				:key="item.recordId"
				@tap="$navigateTo('./details?recordId=' + item.recordId)">
				<view class="left">
					<view class="top">{{item.fillTime}}</view>
					<view>{{item.userName}}</view>
				</view>
				<view class="right">
					<view class="top">{{item.fillMoney}}元</view>
					<view class="btm">加注<text class="bn">{{item.fillNum}}</text>kg</view>
				</view>
			</view>
		</view>
		
		<!-- 底部加载提示 -->
		<btm-load></btm-load>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [],  //列表
				page: 1,  //页码
				showPopup: false,  //是否显示日期筛选图层
				startTime: '',  //开始日期-提交
				endTime: '',  //结束日期-提交
				showSite: false,  //根据加注站筛选
				showPay: false,  //根据支付方式筛选
				payType: '',  //支付方式id
				payName: '', // 支付方式名称
				payList: [
					{text: '微信支付', code: 'payonline'},
					{text: '余额支付', code: 'paybalance'},
					{text: '免单支付', code: 'payfree'},
					{text: '加注卡支付', code: 'paycard'}
				],  //支付方式列表
				siteId: '',  //选择的加注站id
				siteName:'', // 选择的加注站名称
				sitePage: 1,  //加注站页码
				siteList: [],  //加注站列表
				totalNum: '-',  //总加注量
				totalMoney: '-',  //总加注金额
				expectMoney: '-',  //预计收益
				earnRadio: 0,  //收益比例
				earnRadio2: '-',  //收益比例(百分比)
				showSE: false,  //显示发送报表弹窗
				emailAddress: '',  //接受报表的邮箱
			}
		},
		onLoad() {
			this.startTime = this.$getStartDay();
			this.endTime = this.$getToday();
			this.getSiteList();
			this.getList();
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.pullDown();
				this.$store.commit('hasLogin');
			}
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			this.getList();
		},
		onPullDownRefresh() {
			this.pullDown();
		},
		methods: {
			//下拉刷新
			pullDown() {
				this.payType = '';
				this.siteId = '';
				this.siteName = '';
				this.endTime = this.$getToday();
				this.startTime = this.$getStartDay();
				this.hasSelect();
			},
			//进行筛选后
			hasSelect() {
				this.showPopup = false;
				this.showSite = false;
				this.showPay = false;
				this.page = 1;
				this.lists = [];
				this.getList();
			},
			//关闭所有弹窗
			closePopup() {
				this.showPopup = false;
				this.showSite = false;
				this.showPay = false;
				this.showSE = false;
			},
			//打开/关闭加注机筛选
			openCloseSite() {
				this.showPay = false;
				this.showPopup = false;
				this.showSite = !this.showSite;
			},
			//打开/关闭支付方式筛选
			openClosePay() {
				this.showSite = false;
				this.showPopup = false;
				this.showPay = !this.showPay;
			},
			//打开/关闭日期筛选弹窗
			openCloseDate() {
				this.showPay = false;
				this.showSite = false;
				this.showPopup = !this.showPopup;
			},
			//确认日期筛选
			onSubmit(start, end) {
				this.showPopup = false;
				this.startTime = start;
				this.endTime = end;
				this.hasSelect();
			},
			//取消日期筛选
			onCancle(bool) {
				this.showPopup = bool;
			},
			//选择加注站
			changeStie(item, index) {
				if(this.siteId !== item.siteId) {
					this.siteId = item.siteId;
					this.siteName = item.siteName;
				} else {
					this.siteId = '';
					this.siteName = '';
				}
				this.hasSelect();
			},
			//选择支付方式
			changePay(item, index) {
				if(this.payType !== item.code) {
					this.payType = item.code;
					this.payName = item.text;
				} else {
					this.payType = '';
					this.payName = '';
				}
				this.hasSelect();
			},
			//获取加注站列表
			getSiteList() {
				this.$http({
					url: this.$api.siteUrl + 'getfillsitepage',
					data: {
						page: this.sitePage,
						rows: this.$tmp.ROWS_RET * 2
					}
				}).then(res => {
					let arr = res;
					if(arr && arr.length > 0) {
						this.siteList = this.siteList.concat(arr);
						this.sitePage += 1;
					}
				});
			},
			//获取列表
			getList() {
				this.$http({
					url: this.$api.recordUrl + 'getoperatorrecordpage',
					data: {
						page: this.page,
						rows: this.$tmp.ROWS_RET,
						startTime: this.startTime ,
						endTime: this.endTime,
						siteId: this.siteId,
						payType: this.payType
					},
					loading: this.page > 1 ? 0 : ''
				}).then(res => {
					this.totalNum = res.totalNum;
					this.totalMoney = res.totalMoney;
					if(res.earnRadio && res.earnRadio > 0) {
						this.earnRadio = parseFloat(res.earnRadio);
						this.earnRadio2 = this.$toPercent(res.earnRadio);
						this.expectMoney = this.$operation(res.totalMoney, '*', res.earnRadio);
					}
					let arr = res.lstFillRecord;
					if(arr && arr.length > 0) {
						this.lists = this.lists.concat(arr);
						this.page += 1;
					}
				});
			},
			//发送报表
			sendEmail() {
				if(!this.emailAddress) {
					this.$showToast('请输入邮箱！');
					return;
				} else if(!this.$tmp.REG_EMAIL.test(this.emailAddress)) {
					this.$showToast('请输入正确的邮箱！');
					return;
				}
				this.$http({
					url: this.$api.recordUrl + 'downloadexcel',
					data: {
						siteId: this.siteId,
						payType: this.payType,
						startTime: this.startTime,
						endTime: this.endTime,
						emailAddress: this.emailAddress
					}
				}).then(res => {
					this.showSE = false;
					uni.showModal({
						content: '邮件已发送到您的邮箱，请注意查收。',
						showCancel: false
					})
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部区域 */
	.topview {
		width: 750rpx;
		height: 160rpx;
		padding-top: 30rpx;
		padding: 30rpx;
		background-color: $color-primary;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		.icon {
			width: 38rpx;
			height: 38rpx;
			margin-left: 662rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky15pw26ADwJQAAACerFU_7A674.png');
		}
		.total.t1 {
			margin-top: 50rpx;
		}
		.total {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			width: 400rpx;
			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				.num1 {
					font-size: 36rpx;
					color: #CCDCFF;
					font-family: $font-family-num;
				}
				.note1 {
					font-size: 20rpx;
					color: $color-white;
					margin-top: 10rpx;
				}
				.num2 {
					font-size: 60rpx;
					color: $color-white;
					font-family: $font-family-num;
				}
				.note21 {
					font-size: 24rpx;
					color: $color-white;
					margin-top: 10rpx;
				}
				.note22 {
					font-size: 20rpx;
					color: #B2CBFF;
					margin-top: 8rpx;
				}
			}
		}
		
		.date-select {
			color: #FFFFFF;
			padding: 6rpx 20rpx;
			background-color: #276BFF;
			border-radius: 6rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: -20rpx;
			
			.triangle {
				width: 20rpx;
				height: 16rpx;
				flex-shrink: 0;
				margin-left: 10rpx;
				transition: all 0.3s;
				
				&.down {
					transform: rotateZ(180deg);
				}
			}
			>view {
				color: #FFFFFF;
			}
			
			.date-content {
				position: absolute;
				bottom: 55rpx;
				
				> view {
					font-size: 22rpx;
					color: #FFFFFF;
				}
			}
		}
	}
	
	/* 筛选类型 */
	.typeview {
		width: 750rpx;
		height: 90rpx;
		padding: 0 30rpx;
		background-color: $color-white;
		border-bottom: 1rpx solid $color-list;
		display: flex;
		flex-direction: row;
		align-items: center;
		
		>view {
			margin-right: 30rpx;
		}
		
		.sl {
			color: $color-primary;
			max-width: 200rpx;
			overflow: hidden;
			white-space: nowrap;
			line-height: 1.4;
		} 

		.down {
			display: flex;
			flex-direction: row;
			align-items: center;
			.icon {
				width: 34rpx;
				height: 36rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16FX-6AJK6OAAAF9IAoO10531.png');
			}
			.text {
				margin-left: 10rpx;
				font-size: 22rpx;
				color: $color-primary;
			}
		}
	}
	._popup.ts {
		top: 348rpx;
	}
	.select {
		position: fixed;
		top: 248rpx;
		left: 0;
		z-index: $z-index-popup-info;
		width: 750rpx;
		min-height: 200rpx;
		max-height: 65vh;
		padding: 15rpx 15rpx;
		overflow: auto;
		background-color: $color-white;
		.btn {
			display: inline-block;
			margin: 15rpx;
			padding: 21rpx 32rpx;
			font-size: 24rpx;
			color: $color-grey-dark;
			background-color: $color-bg;
			border-radius: $border-radius-bm;
		}
		.btn.sl {
			color: $color-primary;
			background-color: $color-blue-light;
		}
		.btn2 {
			padding: 15rpx 20rpx;
		}
	}
	
	/* 列表 */
	.listview {
		width: 750rpx;
		margin-top: 250rpx;
		.card {
			width: 750rpx;
			padding: 32rpx 30rpx;
			margin-bottom: $spacing-col;
			background-color: $color-white;
			display: flex;
			flex-direction: row;
			align-items: center;
			.left {
				flex: 1;
				.top {
					font-size: 24rpx;
					font-family: $font-family-num;
					margin-bottom: 28rpx;
				}
			}
			.right {
				.top {
					font-size: 36rpx;
					font-family: $font-family-num;
					margin-bottom: 18rpx;
					text-align: end;
				}
				.btm {
					font-size: 24rpx;
					.bn {
						font-family: $font-family-num;
					}
				}
			}
		}
	}
	
	/* 下载报表 */
	.down-excel {
		width: 510rpx;
		background-color: $color-white;
		border-radius: $border-radius-bm;
	}
	
</style>
